import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, SafeAreaView, ScrollView } from 'react-native';
// import { Ionicons } from '@expo/vector-icons';

const menuList = [
  { id: 1, title: '账号管理', onPress: () => {} },
  { id: 2, title: '隐私协议', onPress: () => {} },
  { id: 3, title: '关于我们', onPress: () => {} },
  { id: 4, title: '意见反馈', onPress: () => {} },
  { id: 5, title: '版本', right: 'V1.0', onPress: () => {} },
];

const Shezhi = () => {
  return (
    <SafeAreaView style={styles.container}>
      {/* 顶部栏 */}
      <View style={styles.header}>
        <TouchableOpacity style={styles.backBtn}>
          <Text style={styles.backIcon}>{'<'}</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>设置</Text>
      </View>
      <ScrollView style={styles.content}>
        <View style={styles.menuBox}>
          {menuList.map((item, idx) => (
            <TouchableOpacity
              key={item.id}
              style={styles.menuItem}
              activeOpacity={0.7}
              onPress={item.onPress}
            >
              <Text style={styles.menuTitle}>{item.title}</Text>
              <View style={styles.menuRight}>
                {item.right && <Text style={styles.menuVersion}>{item.right}</Text>}
                <Text style={styles.menuArrow}>{'>'}</Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>
        <TouchableOpacity style={styles.logoutBtn}>
          <Text style={styles.logoutText}>退出</Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: 56,
    borderBottomWidth: 0,
    marginBottom: 10,
  },
  backBtn: {
    position: 'absolute',
    left: 16,
    top: 0,
    height: 56,
    justifyContent: 'center',
  },
  backIcon: {
    fontSize: 22,
    color: '#888',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#111',
  },
  content: {
    flex: 1,
  },
  menuBox: {
    backgroundColor: '#fff',
    borderRadius: 12,
    marginHorizontal: 0,
    marginTop: 0,
    marginBottom: 20,
    overflow: 'hidden',
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    height: 48,
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
  },
  menuTitle: {
    fontSize: 15,
    color: '#888',
    flex: 1,
  },
  menuRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  menuVersion: {
    fontSize: 13,
    color: '#bbb',
    marginRight: 8,
  },
  menuArrow: {
    fontSize: 16,
    color: '#bbb',
  },
  logoutBtn: {
    marginTop: 40,
    alignSelf: 'center',
    paddingVertical: 8,
    paddingHorizontal: 40,
  },
  logoutText: {
    fontSize: 16,
    color: '#444',
  },
});

export default Shezhi;
